<template>
	<view class="customHead" :style="{height:totalHeight+'px'}">
		<view class="bg">
			<image class="bgimg" src="../../static/logo.jpg" mode="aspectFill"></image>
		</view>
		<view class="container">
			<view class="statuBar" :style="{height:statusHeight+'px'}"></view>
			<view class="titleBar" :style="{height:titleBarHeight+'px'}" v-if="!foldState"></view>
			<view class="body" :class="foldState?'fold':''" :style="{height:bodyBarHeight+'px'}">
				<view class="brand">
					<view class="pic">
						<image class="img" src="../../static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="title">
							<text class="font">WTcrazy的小店</text>
							<view class="icon t-icon t-icon-dianpu"></view>
						</view>
						<view class="des">
							欢迎光顾WTcrazy的小店,仅用于学习做的Demo,无法真实支付和给您送货噢~
						</view>
					</view>
				</view>
				<view class="code" @click="money">
					<view class="icon t-icon t-icon-erweima"></view>
					<text class="pay">付款</text>
				</view>
				<u-overlay :show="moneyShow" z-index="9" @click="moneyShow=false" duration="100"></u-overlay>
				<view class="moneycode" v-if="moneyShow">
					<image class="img" mode="aspectFill" src="../../static/money.jpg"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex"
	export default {
		name: "shopHead",
		data() {
			return {
				moneyShow: false
				// statusBarHeight: 0,
				// titleBarHeight: 0
			};
		},
		props: {
			// foldState: {
			// 	type: Boolean,
			// 	defaultValue: false
			// }
		},
		computed: { //计算属性
			...mapGetters(["statusHeight", "titleBarHeight", "bodyBarHeight", "totalHeight", "foldState"]),
			//【不用vuex的写法】
			// totalHeight() {
			// 	//状态栏+胶囊按钮+主体
			// 	if (this.foldState) return this.statusBarHeight + this.titleBarHeight + 15;
			// 	return this.statusBarHeight + this.titleBarHeight + 100 + 15;
			// },
			//【不用vuex的写法】
			// bodyBarHeight() {
			// 	if (this.foldState) return this.titleBarHeight;
			// 	return 100;
			// }
		},
		mounted() { //组件的生命周期【利用js动态获取高度】
			//【不用vuex的写法】
			// let systemInfo = uni.getSystemInfoSync(); //获取系统信息
			// this.statusBarHeight = systemInfo.statusBarHeight || 20; //h5获取不到就用20,这是针对微信小程序的兼容性

			// //条件编译
			// //	#ifdef MP-WEIXIN 
			// let menuBtnInfo = uni.getMenuButtonBoundingClientRect(); //小程序的胶囊按钮
			// this.titleBarHeight = 2 * (menuBtnInfo.top - this.statusBarHeight) + menuBtnInfo.height;
			// //	#endif

			// //不走微信小程序的话
			// //	#ifndef MP-WEIXIN
			// this.titleBarHeight = 40
			// //	#endif
		},
		methods: {
			money() {
				console.log("进入赞赏码");
				this.moneyShow = true;
			}
		}
	}
</script>

<style lang="scss">
	.customHead {
		//因为我换了名字,所以好像出错少了
		height: 300rpx; //先写死
		overflow: hidden; //溢出隐藏
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			background: #000;

			.bgimg {
				//组件里面不能再用组件名称了
				width: 100%;
				height: 100%; //让其在背景的高度里面
				filter: blur(25rpx);
				transform: scale(1.5);
			}
		}

		.container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;

			.statuBar {
				//状态栏
				// border: 1rpx solid green;
			}

			.body {
				@include flex-box();
				padding: 0 25rpx;
				height: 100px;
				// border: 1px solid yellow;
				transition: 0.5s;

				.brand {
					width: 580rpx;
					@include flex-box-set();

					.pic {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						overflow: hidden;
						transition: 0.5s; //缓慢移动

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.text {
						flex: 1;
						padding: 0 30rpx;
						color: #ffffff;

						.title {
							font-size: 40rpx;
							font-weight: bold;
							font-family: "Times New Roman", "微软雅黑";
							display: flex;
							align-items: center;

							.font {
								margin-right: 10rpx;
							}

							.icon {
								margin: 15rpx 0 0 6rpx;
								transform: scale(1.5); //改变图标大小
							}
						}

						.des {
							font-size: 26;
							opacity: 0.8;
							padding: 6rpx 0 0 0;
							@include ellipsis(2);
						}
					}
				}

				.code {
					width: 80rpx;
					height: 80rpx;
					border-left: 1rpx solid rgba(255, 255, 255, 1);
					@include flex-box-set(between);
					flex-direction: column;

					.icon {
						margin-top: 10rpx;
						transform: scale(1.6);
					}

					.pay {
						font-size: 22rpx;
						color: #ffffff;
						text-align: center; //文本居中对齐
						margin-bottom: 0rpx;
					}
				}

				//和body同级别,追加在body后面
				&.fold {
					padding: 0rpx 10rpx 10rpx 10rpx;

					.brand {
						.pic {
							width: 80rpx;
							height: 80rpx;
						}

						.text {
							padding: 0 15rpx;

							.title {
								font-size: 28rpx;

								.icon {
									transform: scale(1.2);
									margin: 7rpx 0 0 0;
								}
							}
						}


						.des {
							display: none;
						}
					}

					.code {
						display: none;
					}
				}

				.moneycode {
					position: fixed;
					top: 30%;
					left: 20%;
					width: 500rpx;
					height: 500rpx;
					z-index: 50;
					// transform: scale(1.0);

					.img {

						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
